function NameInput({ playerName, setPlayerName, error, setError, onEnter }) {
    const [showNameRules, setShowNameRules] = React.useState(false);
    const tooltipTimeoutRef = React.useRef(null);

    React.useEffect(() => {
        return () => {
            if (tooltipTimeoutRef.current) {
                clearTimeout(tooltipTimeoutRef.current);
            }
        };
    }, []);

    const handleInfoMouseEnter = () => {
        if (tooltipTimeoutRef.current) {
            clearTimeout(tooltipTimeoutRef.current);
        }
        setShowNameRules(true);
    };

    const handleInfoMouseLeave = () => {
        if (tooltipTimeoutRef.current) {
            clearTimeout(tooltipTimeoutRef.current);
        }
        tooltipTimeoutRef.current = setTimeout(() => {
            setShowNameRules(false);
        }, 300);
    };

    const handleKeyPress = (e) => {
        try {
            if (e.key === 'Enter') {
                onEnter();
            }
        } catch (error) {
            reportError(error);
        }
    };

    return (
        <div className="mb-6" data-name="name-input-container">
            <div className="flex items-center gap-2 mb-2">
                <label htmlFor="playerName" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                    Enter your name to start:
                </label>
                <div 
                    className="relative inline-block"
                    onMouseEnter={handleInfoMouseEnter}
                    onMouseLeave={handleInfoMouseLeave}
                    data-name="name-rules-info"
                >
                    <svg 
                        xmlns="http://www.w3.org/2000/svg" 
                        className="h-4 w-4 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400 cursor-help"
                        fill="none" 
                        viewBox="0 0 24 24" 
                        stroke="currentColor"
                    >
                        <path 
                            strokeLinecap="round" 
                            strokeLinejoin="round" 
                            strokeWidth={2} 
                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" 
                        />
                    </svg>
                    <div 
                        className={`absolute left-1/2 bottom-full mb-2 w-64 -translate-x-1/2 transition-all duration-200 z-10 ${
                            showNameRules 
                                ? 'opacity-100 transform translate-y-0' 
                                : 'opacity-0 transform translate-y-2 pointer-events-none'
                        }`}
                        data-name="name-rules-tooltip"
                    >
                        <div className="bg-gray-900 text-white p-3 rounded-lg text-xs shadow-lg relative">
                            <p className="font-semibold mb-2">Name Rules:</p>
                            <ul className="space-y-1 text-gray-200">
                                <li>• No discriminatory content</li>
                                <li>• No offensive language</li>
                                <li>• No promotional content (websites, brands)</li>
                                <li>• Violation may result in score removal</li>
                            </ul>
                            <div className="absolute -bottom-1 left-1/2 w-2 h-2 bg-gray-900 transform -translate-x-1/2 rotate-45"></div>
                        </div>
                    </div>
                </div>
            </div>
            <input
                type="text"
                id="playerName"
                value={playerName}
                onChange={(e) => {
                    setPlayerName(e.target.value);
                    setError('');
                }}
                onKeyPress={handleKeyPress}
                className="w-full px-4 py-3 border-2 border-blue-200 dark:border-blue-700 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                placeholder="Your name"
                data-name="player-name-input"
            />
            {error && (
                <p className="mt-2 text-sm text-red-600 dark:text-red-400" data-name="error-message">{error}</p>
            )}
        </div>
    );
}
